<template>
  <div class="user">
    <basic-container>
      <avue-crud
        ref="crud"
        v-model="form"
        :option="option"
        :page="page"
        :table-loading="listLoading"
        :before-open="handleOpenBefore"
        :data="list"
        @on-load="getList"
        @size-change="sizeChange"
        @current-change="currentChange"
        @search-change="handleFilter"
        @refresh-change="handleRefreshChange"
        @row-update="update"
        @row-save="create"
      >
        <template slot="menuLeft">
          <el-button
            class="filter-item"
            type="primary"
            icon="el-icon-edit"
            @click="$refs.crud.rowAdd()"
          >添加
          </el-button>
        </template>

        <template
          slot="menu"
          slot-scope="scope"
        >
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row,scope.index)"
          >编辑
          </el-button>
          <el-button
            type="text"
            icon="el-icon-delete"
            @click="deletes(scope.row,scope.index)"
          >删除
          </el-button>
        </template>
      </avue-crud>
    </basic-container>
  </div>

</template>

<script>
// import { doGet, doPost, doDelet, doPut } from '@/router/axios'
import { formCreate } from "@/api/index";
// import { mapGetters } from 'vuex'

export default {
  name: 'TableUser',
  data() {
    return {
      option: tableOption,
      defaultProps: {
        label: 'name',
        value: 'id'
      },
      page: {
        total: 0, // 总页数
        current: 1, // 当前页数
        size: 20, // 每页显示多少条,
        isAsc: false// 是否倒序
      },
      list: [],
      listLoading: true,
      form: {}
    }
  },
  computed: {

  },
  watch: {

  },
  created() {

  },
  methods: {
    getList(page, params) {
      if (params == undefined || params == null || params == '') {
        params = {}
      }
      // this.listLoading = true
      params.current = page.current - 1
      params.size = page.size
      // doGet('/online/tableColumn/page', params).then(res => {
      //   this.list = res.data.data.dataList
      //   this.page.total = res.data.data.totalElements
      //   this.listLoading = false
      // })
       formCreate.tableColumnPage(params).then(res => {
        this.list = res.data.dataList
        this.page.total = res.data.totalElements
      })
    },
    sizeChange(size) {
      this.page.size = size
    },
    currentChange(current) {
      this.page.current = current
    },
    handleFilter(param, done) {
      this.page.current = 1
      this.getList(this.page, param)
      done()
    },
    handleRefreshChange() {
      this.getList(this.page)
    },
    handleOpenBefore(show, type) {
      window.boxType = type
      // 若是编辑、查看回显名称
      if (['edit', 'views'].includes(type)) {

      } else if (type === 'add') {

      }
      show()
    },
    handleUpdate(row, index) {
      this.$refs.crud.rowEdit(row, index)
    },
    create(row, done, loading) {
      this.listLoading = true
      // doPost('/online/tableColumn/save', this.form).then(res => {
      //   if (res.data.code == 200) {
      //     this.getList(this.page)
      //     done()
      //     this.$message.success('创建成功')
      //     return false
      //   } else {
      //     this.listLoading = false
      //     this.$message.error(res.data.msg)
      //   }
      //   loading()
      // }).catch(() => {
      //   loading()
      // })
       formCreate.tableColumnSave(this.form).then(res => {
        if (res.code == 200) {
          this.getList(this.page)
          done()
          this.$message.success('创建成功')
          return false
        } else {
          this.listLoading = false
          this.$message.error(res.msg)
        }
        loading()
      }).catch(() => {
        loading()
      })
    },
    update(row, index, done, loading) {
      doPut('/online/tableColumn/update', this.form).then(res => {
        if (res.data.code == 200) {
          this.getList(this.page)
          done()
          this.$message.success('更新成功')
          return
        } else {
          this.$message.error(res.data.msg)
          return
        }
        loading()
      }).catch(() => {
        loading()
      })
    },
    deletes(row) {
      this.$confirm('此操作将永久删除该调数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消', type: 'warning'
      }
      ).then(() => {
        // doDelet('/online/tableColumn/delete/' + row.id).then(res => {
        //   if (res.data.code == 200) {
        //     this.getList(this.page)
        //     this.$message.success('删除成功')
        //   } else {
        //     this.$message.error(res.data.msg)
        //   }
        //   loading()
        // }).catch(() => {
        //   loading()
        //   this.$message.error('服务异常')
        // })
         formCreate.tableColumnDelete(row.id).then(res => {
          if (res.code == 200) {
            this.getList(this.page)
            this.$message.success('删除成功')
          } else {
            this.$message.error(res.msg)
          }
          loading()
        }).catch(() => {
          loading()
          this.$message.error('服务异常')
        })
      })
    }
  }
}

export const tableOption = {
  border: true,
  index: true,
  indexLabel: '序号',
  stripe: true,
  menuAlign: 'center',
  searchMenuSpan: 6,
  editBtn: false,
  delBtn: false,
  align: 'center',
  addBtn: false,
  column: [{
    fixed: true,
    label: 'id',
    prop: 'id',
    span: 24,
    hide: true,
    editDisplay: false,
    addDisplay: false
  },
  {
    fixed: true,
    label: '表单id',
    prop: 'tableId',
    editDisplay: true,
    addDisplay: true,
    rules: [{
      required: true,
      trigger: 'blur',
      message: '请输入表单id'
    },
    {
      min: '0',
      max: '32',
      message: '长度在 0 到 32 个字符',
      trigger: 'blur'
    }
    ],
    span: 12
  },
  {
    fixed: true,
    label: '字段名称',
    prop: 'columnName',
    editDisplay: true,
    addDisplay: true,
    rules: [{
      required: true,
      trigger: 'blur',
      message: '请输入字段名称'
    },
    {
      min: '0',
      max: '100',
      message: '长度在 0 到 100 个字符',
      trigger: 'blur'
    }
    ],
    span: 12
  },
  {
    fixed: true,
    label: '字段描述',
    prop: 'columnDes',
    editDisplay: true,
    addDisplay: true,
    rules: [{
      required: true,
      trigger: 'blur',
      message: '请输入字段描述'
    },
    {
      min: '0',
      max: '100',
      message: '长度在 0 到 100 个字符',
      trigger: 'blur'
    }
    ],
    span: 12
  },
  {
    fixed: true,
    label: '字段类型',
    prop: 'columnType',
    editDisplay: true,
    addDisplay: true,
    rules: [{
      required: true,
      trigger: 'blur',
      message: '请输入字段类型'
    },
    {
      min: '0',
      max: '2',
      message: '长度在 0 到 2 个字符',
      trigger: 'blur'
    }
    ],
    span: 12
  },
  {
    fixed: true,
    label: '显示排序',
    prop: 'columnSort',
    editDisplay: true,
    addDisplay: true,
    rules: [{
      required: true,
      trigger: 'blur',
      message: '请输入显示排序'
    },
    {
      min: '0',
      max: '99,999',
      message: '长度在 0 到 99,999 个字符',
      trigger: 'blur'
    }
    ],
    span: 12
  },
  {
    fixed: true,
    label: '边框类型',
    prop: 'columnInputType',
    editDisplay: true,
    addDisplay: true,
    rules: [{
      required: true,
      trigger: 'blur',
      message: '请输入边框类型'
    },
    {
      min: '0',
      max: '2',
      message: '长度在 0 到 2 个字符',
      trigger: 'blur'
    }
    ],
    span: 12
  },
  {
    fixed: true,
    label: '校验类型',
    prop: 'columnValidateType',
    editDisplay: true,
    addDisplay: true,
    rules: [{
      required: true,
      trigger: 'blur',
      message: '请输入校验类型'
    },
    {
      min: '0',
      max: '3',
      message: '长度在 0 到 3 个字符',
      trigger: 'blur'
    }
    ],
    span: 12
  },
  {
    fixed: true,
    label: '是否隐藏(0：否，1：是)',
    prop: 'isHidde',
    editDisplay: true,
    addDisplay: true,
    rules: [{
      required: true,
      trigger: 'blur',
      message: '请输入是否隐藏(0：否，1：是)'
    },
    {
      min: '0',
      max: '1',
      message: '长度在 0 到 1 个字符',
      trigger: 'blur'
    }
    ],
    span: 12
  },
  {
    fixed: true,
    label: '是否新增(0：否，1：是)',
    prop: 'isAdd',
    editDisplay: true,
    addDisplay: true,
    rules: [{
      required: true,
      trigger: 'blur',
      message: '请输入是否新增(0：否，1：是)'
    },
    {
      min: '0',
      max: '1',
      message: '长度在 0 到 1 个字符',
      trigger: 'blur'
    }
    ],
    span: 12
  },
  {
    fixed: true,
    label: '是否新增必填(0：否，1：是)',
    prop: 'isAddRequired',
    editDisplay: true,
    addDisplay: true,
    rules: [{
      required: true,
      trigger: 'blur',
      message: '请输入是否新增必填(0：否，1：是)'
    },
    {
      min: '0',
      max: '1',
      message: '长度在 0 到 1 个字符',
      trigger: 'blur'
    }
    ],
    span: 12
  },
  {
    fixed: true,
    label: '是否编辑(0：否，1：是)',
    prop: 'isEdit',
    editDisplay: true,
    addDisplay: true,
    rules: [{
      required: true,
      trigger: 'blur',
      message: '请输入是否编辑(0：否，1：是)'
    },
    {
      min: '0',
      max: '1',
      message: '长度在 0 到 1 个字符',
      trigger: 'blur'
    }
    ],
    span: 12
  },
  {
    fixed: true,
    label: '是否编辑必填(0：否，1：是)',
    prop: 'isEditRequired',
    editDisplay: true,
    addDisplay: true,
    rules: [{
      required: true,
      trigger: 'blur',
      message: '请输入是否编辑必填(0：否，1：是)'
    },
    {
      min: '0',
      max: '1',
      message: '长度在 0 到 1 个字符',
      trigger: 'blur'
    }
    ],
    span: 12
  },
  {
    fixed: true,
    label: '是否搜索(0：否，1：是)',
    prop: 'isSelect',
    editDisplay: true,
    addDisplay: true,
    rules: [{
      required: true,
      trigger: 'blur',
      message: '请输入是否搜索(0：否，1：是)'
    },
    {
      min: '0',
      max: '1',
      message: '长度在 0 到 1 个字符',
      trigger: 'blur'
    }
    ],
    span: 12
  },
  {
    fixed: true,
    label: '搜索模式',
    prop: 'selectType',
    editDisplay: true,
    addDisplay: true,
    rules: [{
      required: true,
      trigger: 'blur',
      message: '请输入搜索模式'
    },
    {
      min: '0',
      max: '2',
      message: '长度在 0 到 2 个字符',
      trigger: 'blur'
    }
    ],
    span: 12
  },
  {
    fixed: true,
    label: '是否增强(0：否，1：是)',
    prop: 'isStrong',
    editDisplay: true,
    addDisplay: true,
    rules: [{
      required: true,
      trigger: 'blur',
      message: '请输入是否增强(0：否，1：是)'
    },
    {
      min: '0',
      max: '1',
      message: '长度在 0 到 1 个字符',
      trigger: 'blur'
    }
    ],
    span: 12
  },
  {
    fixed: true,
    label: '最小长度',
    prop: 'cloumnMin',
    editDisplay: true,
    addDisplay: true,
    rules: [{
      required: true,
      trigger: 'blur',
      message: '请输入最小长度'
    },
    {
      min: '0',
      max: '10',
      message: '长度在 0 到 10 个字符',
      trigger: 'blur'
    }
    ],
    span: 12
  },
  {
    fixed: true,
    label: '最大长度',
    prop: 'columnMax',
    editDisplay: true,
    addDisplay: true,
    rules: [{
      required: true,
      trigger: 'blur',
      message: '请输入最大长度'
    },
    {
      min: '0',
      max: '10',
      message: '长度在 0 到 10 个字符',
      trigger: 'blur'
    }
    ],
    span: 12
  },
  {
    fixed: true,
    label: '是否主键',
    prop: 'isPrincipal',
    editDisplay: true,
    addDisplay: true,
    rules: [{
      required: true,
      trigger: 'blur',
      message: '请输入是否主键'
    },
    {
      min: '0',
      max: '1',
      message: '长度在 0 到 1 个字符',
      trigger: 'blur'
    }
    ],
    span: 12
  },
  {
    fixed: true,
    label: '是否导出(0：否，1：是)',
    prop: 'isExport',
    editDisplay: true,
    addDisplay: true,
    rules: [{
      required: true,
      trigger: 'blur',
      message: '请输入是否导出(0：否，1：是)'
    },
    {
      min: '0',
      max: '1',
      message: '长度在 0 到 1 个字符',
      trigger: 'blur'
    }
    ],
    span: 12
  },
  {
    fixed: true,
    label: '是否使用字典(0：否，1：是)',
    prop: 'isDict',
    editDisplay: true,
    addDisplay: true,
    rules: [{
      required: true,
      trigger: 'blur',
      message: '请输入是否使用字典(0：否，1：是)'
    },
    {
      min: '0',
      max: '11',
      message: '长度在 0 到 11 个字符',
      trigger: 'blur'
    }
    ],
    span: 12
  },
  {
    fixed: true,
    label: '字典编码(如果使用字典，则填写)',
    prop: 'dictCode',
    editDisplay: true,
    addDisplay: true,
    rules: [{
      required: true,
      trigger: 'blur',
      message: '请输入字典编码(如果使用字典，则填写)'
    },
    {
      min: '0',
      max: '10',
      message: '长度在 0 到 10 个字符',
      trigger: 'blur'
    }
    ],
    span: 12
  },
  {
    fixed: true,
    label: '创建时间',
    prop: 'createTime',
    editDisplay: false,
    addDisplay: false,
    span: 12
  },
  {
    fixed: true,
    label: '更新时间',
    prop: 'updateTime',
    editDisplay: false,
    addDisplay: false,
    span: 12
  }
  ]
}

</script>
